<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>dojox.form.FileUploader</title>
	<style type="text/css">
		@import "../../../dojo/resources/dojo.css";
		@import "../../../dijit/themes/dijit.css";
		@import "../../../dijit/themes/tundra/form/Button.css";
		@import "../../../dijit/tests/css/dijitTests.css"; 
		
		@import "../resources/FileInput.css"; 
	</style>
	<script>
		passthrough = function(msg){
			//for catching messages from Flash
			if(window.console){
				console.log(msg);	
			}
		}
		forceNoFlash = false;
		selectMultipleFiles = false;
		var qs = window.location.href.split("?");
		if(qs.length>1){
			qs = qs[1];
			if(qs.indexOf("forceNoFlash")>-1){
				forceNoFlash = true;
			}
			if(qs.indexOf("multiMode")>-1){
				selectMultipleFiles = true;
			}
		 }
		 
		 setLoc = function(href){
		 	window.location.href = window.location.href.split("?")[0] + href;
		 }
		 showWithFlash = function(){
		 	if(forceNoFlash){
				setLoc("");
			}
		 }
		 showWithoutFlash = function(){
		 	if(!forceNoFlash){
				setLoc((selectMultipleFiles) ? "?forceNoFlash&multiMode" : "?forceNoFlash"); 
			}
		 }
		 showMulti = function(){
		 	if(!selectMultipleFiles){
				setLoc((forceNoFlash) ? "?forceNoFlash&multiMode" : "?multiMode");
			}
		 }
		 showSingle = function(){
		 	if(selectMultipleFiles){
				setLoc((forceNoFlash) ? "?forceNoFlash" : ""); 
			}
		 }
    </script>
	<script type="text/javascript" src="../../../dojo/dojo.js" 
    	djConfig="isDebug:true, parseOnLoad: true, debugAtAllCosts:false"></script>
	<script type="text/javascript">
		dojo.require("dojox.form.FileUploader");
		dojo.require("dijit.form.Button"); 
		dojo.require("dojo.parser");
		
		//using this early for the forceNoFlash test:
		dojo.require("dojox.embed.Flash");
		
		var uploadUrl = "../resources/UploadFile.php";
		
		var rmFiles = "";
		var fileMask = [
			["Jpeg File", 	"*.jpg;*.jpeg"],
			["GIF File", 	"*.gif"],
			["PNG File", 	"*.png"],
			["All Images", 	"*.jpg;*.jpeg;*.gif;*.png"]
		];
		// For testing 1D array masks:
		// var fileMask = 	["All Images", 	"*.jpg;*.jpeg;*.gif;*.png"];
		// var fileMask = 	["PNG File", 	"*.png"];
		
		dojo.addOnLoad(function(){
			if(forceNoFlash){
				dojox.embed.Flash.available = 0;
				dojo.byId("hasFlash").style.display = "none";
				dojo.byId("fTypes").style.display = "none";
			}else{
				dojo.byId("noFlash").style.display = "none";
				if(dojo.isArray(fileMask[0])){
					dojo.byId("fTypes").innerHTML+=fileMask[fileMask.length-1][1];
				}else{
					dojo.byId("fTypes").innerHTML+=fileMask[1];
				}
			}
			
			if(selectMultipleFiles){
				dojo.byId("fmode").innerHTML = dojo.byId("hmode").innerHTML = "Multi-File Mode";
				dojo.byId("fSingle").style.display = "none";
				dojo.byId("hSingle").style.display = "none";
				dijit.byId("fbm").domNode.style.display = "none";
				dijit.byId("hbm").domNode.style.display = "none";
			}else{
				dojo.byId("fmode").innerHTML = dojo.byId("hmode").innerHTML = "Single-File Mode";
				dojo.byId("fMulti").style.display = "none";
				dojo.byId("hMulti").style.display = "none";
				dijit.byId("fbs").domNode.style.display = "none";
				dijit.byId("hbs").domNode.style.display = "none";
			}
			dojo.byId("uploadedFiles").value = "";
			dojo.byId("fileToUpload").value = "";
	
			
			var f0 = new dojox.form.FileUploader({
				button:dijit.byId("btn0"), 
				uploadUrl:uploadUrl, 
				uploadOnChange:false, 
				selectMultipleFiles:selectMultipleFiles,
				fileMask:fileMask,
				isDebug:true,
				devMode:true,
				postData:{sessionid:"TestStuff won't be sent", userId:"DojoMan"}
			});
			
			doUpload = function(){
				dojo.byId("fileToUpload").value = "uploading...";
				f0.upload({postdata:dojo.byId("postdata").value});
			}
			dojo.connect(f0, "onChange", function(dataArray){
				console.log("onChange.data:", dataArray);
				dojo.forEach(dataArray, function(d){
					//file.type no workie from flash selection (Mac?)
					if(selectMultipleFiles){
						dojo.byId("fileToUpload").value += d.name+" "+Math.ceil(d.size*.001)+"kb \n";
					}else{
						dojo.byId("fileToUpload").value = d.name+" "+Math.ceil(d.size*.001)+"kb \n";
					}
				});
			});
			dojo.connect(f0, "onProgress", function(dataArray){
				console.info("test.onProgress", dataArray);
				dojo.forEach(dataArray, function(d){
					dojo.byId("fileToUpload").value += "onProgress: ("+d.percent+"%) "+d.name+" \n";
					
				});
			});
			dojo.connect(f0, "onComplete", function(dataArray){
				console.info("test.onComplete", dataArray);
				totalFiles = dataArray.length;
				filesLoaded = 0;
				dojo.forEach(dataArray, function(d){
					dojo.byId("fileToUpload").value += "onComplete: "+d.file+" \n";
					dojo.byId("uploadedFiles").value += "onComplete: "+d.file+" \n";
					dojo.byId("rgtCol").innerHTML += '<img src="'+d.file+'" onload="onFilesLoaded()"/>';
					rmFiles+=d.file+";";
				});
			});
			
			Destroy = function(){
				f0.destroyAll();
			}
			
		});
		var _disabled = false
		disableButton = function(){
			_disabled = !_disabled;
			dijit.byId("btn0").attr("disabled", _disabled);
		}
		
		var totalFiles = 0;
		var filesLoaded = 0;
		onFilesLoaded = function(){
			filesLoaded++;
			console.log("FILE LOADED!!", filesLoaded, "of", totalFiles);
			if(filesLoaded>=totalFiles){
				console.log(" * * ALL FILES LOADED");
				// remove them from the server now
				serverCleanUp();
			}
		}
		clearFiles = function(){
			dojo.byId("rgtCol").innerHTML = "";
			dojo.byId("uploadedFiles").value = "";
			serverCleanUp();
		}
		serverCleanUp = function(){
			dojo.xhrGet({
				url:uploadUrl,
				handleAs:"text",
				content:{
					rmFiles:rmFiles
				}
			});
			rmFiles = "";
			
		}
		dojo.addOnUnload(function(){
			
		});
		

	</script>
    <style>
		#wrapper{
			width:100%;
		}
		#fileToUpload{
			border:#CCCCCC 1px solid;
			overflow-y:auto;
			overflow-x:hidden;
		}
		#uploadedFiles{
			border:#CCCC00 1px solid;
			background:#FFFFCC;
		}
		.leftCol{
			width:500px;
			padding:5px;
			vertical-align:top;
		}
		.rgtCol{
			vertical-align:top;
		}
		textarea{
			display:block;
		}
		#postdata{
			display:block;
			margin-top:5px;
			width:405px;
		}
		#noFlash button, #hasFlash button{
			font-size:9px;
		}
		#cont{
			width:200px;
			height:100px;
			overflow:scroll;
			background-color:transparent;
		}
	</style>
</head>
<body class="tundra">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="leftCol">
	
    	<div id="hasFlash">
            <h1>
            	dojox.form.FileUploader - FileInputFlash Test
            	<br/> Flash Mode - <span id="fmode"></span>
            </h1>
            <div onClick="showWithoutFlash()" dojoType="dijit.form.Button">Emulate No Flash Plugin</div>
            <div id="fbm" onClick="showMulti()" dojoType="dijit.form.Button">Switch to Multi-File mode</div>
            <div id="fbs" onClick="showSingle()" dojoType="dijit.form.Button">Switch to Single-File mode</div>
            
            <p>The following is an example of FileUploader trigger FileInputFlash act's with the same APIs as FileInputOverlay,
			so you can build your own file input. <em>For the file to actually upload, you'll need to have PHP enabled. </em>
			<button onclick="disableButton();">Test Disabled Button</button>
			</p>
            <p id="fMulti">Multiple-file mode. You may choose multiple files from the System Dialog.</p>
            <p id="fSingle">Single-file mode. You may choose only one from the System Dialog.</p>
        </div>
        <div></div>
        <div id="noFlash">
            <h1>
            	dojox.form.FileUploader - Degraded to FileInputOverlay
            	<br/>HTML Mode - <span id="hmode"></span>
			</h1>
            <div onClick="showWithFlash()" dojoType="dijit.form.Button">Normal Flash Plugin Mode</div>
            <div id="hbm" onClick="showMulti()" dojoType="dijit.form.Button">Switch to Multi-File mode</div>
            <div id="hbs" onClick="showSingle()" dojoType="dijit.form.Button">Switch to Single-File mode</div>

            <p>The following is an example of the user not having the Flash plugin installed, and the FileUploader degrading to the FileInputOverlay, except in Opera, which does not support the HTML file input overlay.</p>
            <p id="hMulti">Multiple-file mode. You may upload multiple files by adding files to the upload list, one at a time.</p>
            <p id="hSingle">Single-file mode. You may choose only one from the System Dialog.</p>
        </div>
        
        <div id="cont">
        <div id="btn0" class="browse" dojoType="dijit.form.Button">Select Images...</div>
        </div>
		<span id="fTypes">Choose from these types:</span>
        
        <textarea cols="50" rows="6" id="fileToUpload"></textarea>
        <input type="text" id="postdata" value="Add Post Data Here" />
        <div id="uploadBtn" class="uploadBtn" onClick="doUpload();" dojoType="dijit.form.Button">Upload</div>
        
        <div class="uploadedFilesLabel">Uploaded Files:</div>
        
        <textarea cols="50" rows="4" id="uploadedFiles"></textarea>
        
        <div onClick="clearFiles()" dojoType="dijit.form.Button">Remove Files</div>
        <!-- Test destroy: <div onClick="Destroy()" dojoType="dijit.form.Button">Destroy()</div> -->
    </td>
    <td id="rgtCol">&nbsp;</td>
  </tr>
</table>
</body>
</html>
